<template>
  <div class="text-center color-gray" v-if="!chatHistoryList.length">还没有消息哦！</div>
  <div
    v-for="item in chatHistoryList"
    :key="item.recordId"
    class="mb4 flex"
    :class="{ 'flex-row-reverse': item.sendMemId !== chatHistoryList[0].sendMemId }"
  >
    <el-avatar class="flex-shrink-0" shape="square" :size="40" :src="item.avatar">{{
      item.sendMemId
    }}</el-avatar>
    <div class="message ml3 mr3">
      <div class="creatTime mb2 font-size-3 color-gray">
        {{ formatDate(item.createTime) }}
      </div>
      <div class="content inline-block rd bg-gray bg-opacity-30 pb1 pl2 pr2 pt1">
        <template v-if="item.messageType === 'TIMImageElem'">
          <img :src="item.messageContent" width="100" />
        </template>
        <template v-if="item.messageType === 'TIMCustomElem'">
          <div class="flex">
            <img
              :src="
                JSON.parse(item.messageContent)?.imageUrl || JSON.parse(item.messageContent)?.avatar
              "
              class="mr2 h60px w60px"
            />
            <div>
              <b class="block font-size-3.5 lh-1em">{{ JSON.parse(item.messageContent)?.title }}</b>
              <div class="mt.5 font-size-2.8 color-gray">{{
                JSON.parse(item.messageContent)?.description
              }}</div>
              <div class="color-red mt1.5!">{{ JSON.parse(item.messageContent)?.price }}</div>
            </div>
          </div>
        </template>
        <template v-if="item.messageType === 'TIMTextElem'">
          {{ decodeURIComponent(item.messageContent) }}
        </template>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'

interface ChatHistoryListType {
  messageId: number
  recordId: number
  sendMemId: number
  reciveMemId: number
  messageType: string
  messageContent: string
  messageStatus: number
  avatar?: string
  createTime?: string
}

const { chatHistoryList } = defineProps<{ chatHistoryList: ChatHistoryListType[] }>()
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* stylelint-disable-next-line rule-empty-line-before */
.flex-row-reverse {
  .message {
    text-align: right;
  }
}
</style>
